<script lang="ts" setup>
import { Editor } from "@bytemd/vue-next";
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import { withDefaults, defineProps } from "vue";
import EditorProps from "@/interface/EditorProps";

//文本编辑器所需要的插件
const plugins = [gfm(), highlight()];

/**
 * 定义组件所需属性的默认值
 */
const editorAttr = withDefaults(defineProps<EditorProps>(), {
  value: () => "",
  mode: () => "split",
  handleChange: (v: string) => {
    console.log(v);
  }
});
</script>

<template>
  <Editor :value="editorAttr.value" :mode="mode" :plugins="plugins" @change="editorAttr.handleChange" />
</template>

<style>
/* 隐藏作者的github广告图标超链接 */
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {
  display: none;
}
</style>
